<template>
  <div class="orderDetail">
    <el-card shadow="nerve">
      <div class="main_header">
        <el-steps :active="orderBase.status + 1" align-center>
          <el-step title="待付款" :description="orderBase.createTime" />
          <el-step title="代发货" :description="orderBase.paymentTime" />
          <el-step title="已发货" :description="orderBase.deliveryTime" />
          <el-step title="已完成" :description="orderBase.receiveTime" />
          <el-step title="已关闭" :description="orderBase.finishTime" />
        </el-steps>
      </div>
      <div class="main_body">
        <!-- 订单信息 -->
        <div class="order-info">
          <div class="title">
            <h3>订单信息:</h3>
            <el-button v-if="orderBase.status == 0" type="danger" size="mini">
              待付款
            </el-button>
            <el-button
              v-else-if="orderBase.status == 1"
              type="warning"
              size="mini"
            >
              待发货
            </el-button>
            <el-button
              v-else-if="orderBase.status == 2"
              type="primary"
              plain
              size="mini"
            >
              已发货
            </el-button>
            <el-button
              v-else-if="orderBase.status == 3"
              type="success"
              size="mini"
            >
              已完成
            </el-button>
            <el-button
              v-else-if="orderBase.status == 4"
              type="info"
              size="mini"
            >
              已关闭
            </el-button>
            <el-button
              v-else-if="orderBase.status == 5"
              type="danger"
              size="small"
            >
              无效订单
            </el-button>
          </div>
          <div class="info">
            <div class="info-item">
              <span>订单金额:</span>{{ orderBase.payAmount }}
            </div>
            <div class="info-item">
              <span>订单编号:</span>{{ orderBase.orderSn }}
            </div>
            <div class="info-item">
              <span>用户账号:</span>{{ orderBase.memberUsername }}
            </div>
            <div class="info-item"><span>备注:</span>{{ orderBase.note }}</div>
            <div class="info-item">
              <span>下单时间:</span>{{ orderBase.createTime }}
            </div>
            <div class="info-item">
              <span>付款时间:</span>{{ orderBase.paymentTime }}
            </div>
            <div class="info-item">
              <span>发货时间:</span>{{ orderBase.deliveryTime }}
            </div>
            <div class="info-item">
              <span>收货时间:</span>{{ orderBase.receiveTime }}
            </div>
          </div>
        </div>
        <!-- //用户信息 -->
        <div class="customer-info">
          <div class="title">
            <h3>收货人信息:</h3>
          </div>
          <div class="info">
            <div class="info-item">
              <span>收货人:</span>{{ orderBase.receiverName }}
            </div>
            <div class="info-item">
              <span>用户姓名:</span>{{ orderBase.memberUsername }}
            </div>
            <div class="info-item">
              <span>手机号码:</span>{{ orderBase.receiverPhone }}
            </div>
            <div class="info-item">
              <span>邮政编码:</span>{{ orderBase.receiverPhone }}
            </div>
            <div class="info-item">
              <span>地址:</span>{{ orderBase.receiverProvince }}
              {{ orderBase.receiverCity }} {{ orderBase.receiverRegion }}
            </div>
            <div class="info-item">
              <span>详细地址:</span>{{ orderBase.receiverDetailAddress }}
            </div>
          </div>
        </div>
        <!-- 商品信息 -->
        <div class="goods-info">
          <el-table :data="orderItems" border style="width: 100%">
            <el-table-column
              prop="productName"
              label="商品名称"
              align="center"
              width="180"
            />
            <el-table-column
              prop="name"
              label="商品图片"
              width="180"
              align="center"
            >
              <template slot-scope="scope">
                <div>
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.productPic"
                    fit="fill"
                    :lazy="true"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="address" label="是否退货">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.isReturn === 0 ? '否' : '是' }}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="productBrand" label="品牌" />
            <el-table-column prop="productPrice" label="价格" align="center" />
            <el-table-column
              prop="productQuantity"
              align="center"
              label="商品数量"
            />
            <el-table-column align="center" prop="totalPrice" label="小计" />
          </el-table>
        </div>
        <!-- 费用信息 -->
        <div
          class="postage-info"
          :style="orderBase.status == 1 ? 'border: none' : ''"
        >
          <div class="title">
            <h3>收货人信息:</h3>
          </div>
          <div class="info">
            <div class="info-item">
              <span>运费金额:</span
              >{{ orderBase.couponAmount ? orderBase.couponAmount : '0' }}
            </div>
            <div class="info-item">
              <span>订单总额:</span>{{ orderBase.totalAmount }}
            </div>
            <div class="info-item">
              <span>实际价格:</span>{{ orderBase.payAmount }}
            </div>
            <div class="info-item">
              <span>促销优惠价格:</span
              >{{ orderBase.promotionAmount ? orderBase.promotionAmount : '0' }}
            </div>
          </div>
          <!--状态为1时 是否发货 -->
          <el-form
            v-if="orderBase.status == 1"
            ref="sendDone"
            :inline="true"
            :model="sendDone"
            size="mini"
          >
            <el-form-item
              class="info-item"
              prop="deliveryCompany"
              :rules="[
                { required: true, message: '请选择物流公司', trigger: 'blur' }
              ]"
              label="物流公司"
            >
              <el-select
                v-model="sendDone.deliveryCompany"
                clearable
                label="物流公司"
                placeholder="请选择物流公司"
              >
                <el-option
                  v-for="item in deliveryCompanyList"
                  :key="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item
              prop="deliverySn"
              label="物流单号"
              :rules="[
                { required: true, message: '请填写物流编号', trigger: 'blur' }
              ]"
              class="info-item"
            >
              <el-input
                v-model="sendDone.deliverySn"
                placeholder="物流单号"
                clearable
              />
            </el-form-item>
          </el-form>
        </div>
        <!-- 物流信息 -->
        <div
          v-if="orderBase.status !== 0 && orderBase.status !== 1"
          class="logistics-info"
        >
          <div class="title">
            <h3>物流信息:</h3>
            <span>{{
              orderBase.deliveryCompany ? orderBase.deliveryCompany : '中国邮政'
            }}</span>
            <span
              >[{{ orderBase.deliverySn ? orderBase.deliverySn : 4848 }}]</span
            >
          </div>
          <div class="info">
            <el-table :data="deliveryInfo" border stripe>
              <el-table-column label="时间" prop="data" width="200" />
              <el-table-column prop="status" label="状态" width="500" />
              <el-table-column label="备注" prop="note" />
            </el-table>
          </div>
        </div>
        <!-- 控制按钮 -->
        <div class="btn">
          <el-button v-if="orderBase.status == 1" type="primary" @click="send()"
            >确认发货</el-button
          >
          <el-button
            v-if="orderBase.status == 3"
            type="primary"
            @click="closeOrder"
            >关闭订单</el-button
          >
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import {
  orderDetail,
  finishOrder,
  sendDone,
  receiveProductsForce
} from '@/api/orders/orderList/index'
export default {
  data() {
    return {
      id: '',
      orderBase: {},
      orderItems: [],
      sendDone: {
        orderId: '',
        deliveryCompany: '',
        deliverySn: ''
      },
      deliveryCompanyList: ['顺丰快递', '韵达快递', '中通快递', '申通快递'],
      deliveryInfo: [
        {
          data: '2021-03-06 21:16:58',
          status: '深圳市横岗速递营销部已收件',
          note: '揽投员姓名：钟定基;联系电话：13883838888'
        },
        {
          data: '2021-03-07 14:25:00',
          status: '离开深圳市 发往广州市',
          note: ''
        },
        {
          data: '2021-03-08 00:17:00',
          status: '到达广东速递物流公司广航中心处理中心（经转）',
          note: ''
        },
        {
          data: '2021-03-08 01:15:00',
          status: '离开广州市 发往北京市（经转）',
          note: ''
        },
        {
          data: '2021-03-09 09:01:00',
          status: '到达北京黄村转运站处理中心（经转）',
          note: ''
        },
        {
          data: '2021-03-09 18:39:00',
          status: '离开北京市 发往呼和浩特市（经转）',
          note: ''
        },
        {
          data: '2021-03-10 18:06:00',
          status: '到达 呼和浩特市 处理中心',
          note: ''
        },
        {
          data: '2021-03-11 09:53:48',
          status: '呼和浩特市邮政速递物流分公司金川揽投部安排投递',
          note: '投递员姓名：安长虹;联系电话：18047140142'
        }
      ]
    }
  },
  created() {
    this.sendDone.orderId = this.id = this.$route.params.id
    this.init()
  },
  mounted() {},
  methods: {
    init() {
      orderDetail(this.id).then((res) => {
        this.orderBase = res.data.orderDetail.orderBase
        this.orderItems = res.data.orderDetail.orderItems
        console.log(this.orderBase)
      })
    },
    // 确认发货
    send() {
      // 表单验证
      this.$refs['sendDone'].validate((valid) => {
        if (valid) {
          this.$confirm('确认发货?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              sendDone(this.sendDone).then((res) => {
                if (res.success) {
                  this.$message.success('发货成功')
                  this.init()
                } else {
                  this.$message.error(res.message)
                }
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
        } else {
          this.$message.error('发货信息填写不正确!')
          return false
        }
      })
    },
    // 关闭订单
    closeOrder() {
      this.$confirm('是否关闭订单?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          finishOrder(this.id).then((res) => {
            if (res.success) {
              this.$message.success('订单已关闭!')
              this.init()
            } else {
              this.$message.error(res.message)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.orderDetail {
  .main_header {
    padding: 24px;
    border-bottom: 1px solid #dcdfe6;
  }
  .main_body {
    .order-info,
    .order-info,
    .customer-info,
    .goods-info,
    .postage-info,
    .logistics-info {
      padding: 24px 0;
      border-bottom: 1px solid #dcdfe6;
      .title {
        h3 {
          display: inline-block;
          margin-right: 15px;
        }
        span {
          font-size: 18px;
          color: rgb(128, 128, 128);
          font-weight: bold;
        }
      }
      .info {
        display: flex;
        font-size: 14px;
        flex-wrap: wrap;
        .info-item {
          display: flex;
          align-items: center;
          width: 300px;
          line-height: 40px;
          span {
            padding-right: 10px;
          }
        }
      }
    }
    .postage-info {
      .info {
        .info-item {
          span {
            color: #000;
          }
          color: #f00;
        }
        .sendDone {
          display: flex;
        }
      }
      .el-form {
        margin-top: 10px;
        .el-form-item {
          width: 300px;
        }
      }
    }
    .btn {
      .el-button {
        display: block;
        margin: 0 auto 30px;
      }
    }
  }
}
</style>
